<template>
  <div>
    <img src="@/images/indexbj.png" alt="" class="indexbj" />
    <!-- 顶部 -->
    <head-main />
    <!-- mens -->
    <div class="indexmentsmain">
      <div
        class="indexments tool"
        v-for="item in mentdata"
        :key="item.id + 'xd'"
        @click="id = item.id"
      >
        <img
          src="@/images/ment.png"
          class=""
          v-if="id != item.id"
          :class="id == item.id ? 'active' : 'normal'"
        />
        <img
          src="@/images/mentac.png"
          :class="id == item.id ? 'normal' : 'active'"
          v-if="id != item.id"
        />
        <img src="@/images/mentac.png" v-if="id == item.id" />
        <div
          class="indexmentname"
          :class="id == item.id ? 'indexmentshover' : ''"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <!--开始-->
    <div class="startbox tool" @click="startfn">
      <img src="@/images/start.png" alt="" class="normal" />
      <img src="@/images/startac.png" alt="" class="active" />
    </div>
    <!--主体内容1 -->
    <div class="indexmainbox" v-if="id == 1">
      <p>
        1、如果有可能，取出滤线栅。设置SID为180cm，如达不到则调节 SID 为最大值。
      </p>
      <p>
        2、调整照射野完全覆盖影像接收器,用1.0mm
        铜滤过板盖住限束器出束口,设置管电压为
        70kV,分别选取影像接收器入射空气比释动能约1μGy、5μGy、10μGy、20μGy和30μGy进行曝光，获取每一幅预处理影像。
      </p>
      <p>
        3、在每一幅预处理影像中央选取面积约10 cmX10cm ROI，获取每幅影像
        ROI的平均像素值。
      </p>
      <p>
        4、以平均像素值为纵坐标，影像接收器入射表面空气比释动能值为横坐标进行拟合:
      </p>
      <p>（1）对于线性响应的系统，拟合直线，计算相关参数R²</p>
      <p>
        （2）对于非线性响应的系统(比如对数相关或指数相关)，拟合对数曲线或指数曲线，计算相关参数R²。
      </p>
    </div>

    <!-- 主体内容3 -->
    <div class="indexmainbox Scroll" v-if="id == 3">
      <div class="wpmains">
        <div
          class="wpboxs"
          v-for="item in wpdata"
          :key="item.id"
          @click="wpidfn(item.id)"
        >
          <div class="tool wbbox">
            <img :src="item.src" class="wpimgitemss" :alt="item.name" />
            <img
              src="@/images/wpbj.png"
              class="normal"
              :ref="'normalImg' + item.id"
              v-if="!wpid.includes(item.id)"
              :alt="item.name"
            />
            <img
              src="@/images/wpbjac.png"
              :alt="item.name"
              class="active"
              v-if="!wpid.includes(item.id)"
            />
            <img
              class="wpimgyxs"
              src="@/images/wpbjac.png"
              :alt="item.name"
              v-if="wpid.includes(item.id)"
            />
          </div>

          <el-tooltip class="item" effect="dark" :content="item.name">
            <div class="wpnames">{{ item.name }}</div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="showmxbox" v-if="show">
      <i class="el-icon-circle-close showboxclose" @click="show = false"></i>
      <show-mx :mxmtnumber="mxmtnumber" />
    </div>
  </div>
</template>

<script>
import headMain from '@/components/headMain.vue'
import showMx from '@/components/showMx.vue'
export default {
  components: { headMain, showMx },
  name: 'WorkspaceJsonIndex',
  data() {
    return {
      mentdata: [
        {
          id: 1,
          name: '实验背景'
        },

        {
          id: 3,
          name: '物品展示'
        }
      ],
      id: 1,
      wpid: [],
      mxmtnumber: 0,
      wpdata: [
        {
          id: 1,
          name: '笔记本电脑',
          src: require('@/images/wp1.png')
        },
        {
          id: 2,
          name: '多探测器XR',
          src: require('@/images/wp2.png')
        },
        {
          id: 3,
          name: '数据转换器',
          src: require('@/images/wp3.png')
        },
        {
          id: 4,
          name: '20mm铝板',
          src: require('@/images/wp11.png')
        },
        {
          id: 5,
          name: '铅板',
          src: require('@/images/wp5.png')
        },
        {
          id: 6,
          name: '1.0mm铜板',
          src: require('@/images/wp6.png')
        },
        {
          id: 7,
          name: '1.5mm铜板',
          src: require('@/images/wp7.png')
        },
        {
          id: 8,
          name: '准直度检测板',
          src: require('@/images/wp8.png')
        },
        {
          id: 9,
          name: '线束垂直度测试筒',
          src: require('@/images/wp9.png')
        },
        {
          id: 10,
          name: '毫米级刻度铅尺',
          src: require('@/images/wp10.png')
        },
        {
          id: 11,
          name: '铅板(15cm*15cm*2mm)',
          src: require('@/images/wp11.png')
        },
        {
          id: 12,
          name: '铅块(4cm*4cm*4mm)',
          src: require('@/images/wp12.png')
        },
        {
          id: 13,
          name: '屏片X射线密着检测板',
          src: require('@/images/wp13.png')
        },
        {
          id: 14,
          name: '高对比分辨力测试卡',
          src: require('@/images/wp14.png')
        },
        {
          id: 15,
          name: '低对比分辨力检测模体',
          src: require('@/images/wp15.png')
        },
        {
          id: 16,
          name: '胶带',
          src: require('@/images/wp16.png')
        }
      ],
      show: false
    }
  },
  mounted() {},
  methods: {
    startfn() {
      this.$router.push({
        name: 'home'
      })
    },
    wpidfn(id) {
      this.mxmtnumber = id
      this.show = true
    }
  }
}
</script>
<style scoped>
.item {
  cursor: pointer;
}
</style>
